<template>
	<div class="Classify">
		<div class="container">
			<header>
				<Search class="Search"></Search>
			</header>
			<div class="scroll">
				<div class="scroll-menu">
					<ul>
						<li 
							v-for="(item,index) of menuBar" 
							:key="index"
							@click="handClick(index)"
							:class="{active:currentIndex === index}"
						>
							{{item}}
						</li>
					</ul>
				</div>
				<div class="scroll-prolist" ref="proWrapper">
					<ul>
						<li class="pro-classify" 
							v-for="(items,index) of prolist"
							:key="index"
							ref="proClassify"
						>
							<ul class="pro-items">
								<li v-for="(item,index) of items" 
									:key="index"
								>
									<div class="img">
										<img :src="item.imgUrl" />
									</div>
									<span>{{item.proDec}}</span>
								</li>
							</ul>
						</li>	
					</ul>
				</div>
			</div>
		</div>
		<MenuBar></MenuBar>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default{
		name:"Classify",
		data(){
			return{
				menuBar:[],
				prolist:[],
				heightArr:[],
				scrollY:0,
			}
		},
		
		computed:{
			currentIndex(){
				for(let i = 0; i<this.heightArr.length-1; i++){
					let height1 = this.heightArr[i]
					let height2 = this.heightArr[i+1]
					if(this.scrollY >= height1 && this.scrollY < height2){
//						console.log(i)
						return i;
					}
					if(this.scrollY >= this.heightArr[this.heightArr.length-1]){
						return 0;
					}
				}
			}
		},
		
		methods:{
			initScroll(){
				this.proScroll = new BScroll(this.$refs.proWrapper,{
					probeType:3
				})
				this.proScroll.on('scroll',(pos)=>{
					this.scrollY = Math.abs(Math.round(pos.y))
				})
			},
			handClick(i){
				let prolist = this.$refs.proClassify
				let el = prolist[i]
				this.proScroll.scrollToElement(el, 300)
			},
			getHeight(){
				let height = 0
				this.heightArr.push(height)				
				let prolist = this.$refs.proClassify
				for(let i = 0; i<this.prolist.length; i++){
					let itemHeight = prolist[i].clientHeight
					height += itemHeight
					this.heightArr.push(height)
				}
			}
		},
		
		mounted(){
			this.$http.get('api/classify.json')
			.then((res)=>{
				let resData = res.data
				this.menuBar = resData.menuBar
				this.prolist = resData.prolist
				this.$nextTick(()=>{
					this.initScroll()
					this.getHeight()
				})
			})
		}
	}
</script>
	
<style lang="scss" scoped>
	.Classify .container{
		padding-bottom: 103px;
	}
	.Classify header{
		width:100%;
		height: 94px;
		background: #FF9900;
		background-size: 100%;
		overflow: hidden;
		position: relative;
		z-index: 999;
	}
	.Classify header .Search{
		margin:0 auto;
		margin-top:20px;
	}
	.Classify .scroll{
		display: flex;
	}
	.Classify .scroll-menu{
		width:225px;
	}
	.Classify .scroll-menu li{
		width:inherit;
		height: 95px;
		line-height: 95px;
		font-size: 28px;
		text-align: center;
		background: #eee;
	}
	.Classify .scroll-menu .active{
		background: url("~img/classify/menu_bg.jpg") no-repeat;
	}
	.Classify .scroll-prolist{
		width:525px;
		height: 1517px;
	}
	.Classify .pro-items{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.Classify .pro-items li{
		width:230px;
		height: 237px;
		border:2px solid #339999;
		border-radius: 9px;
		margin-top:22px;
		position: relative;
	}
	.Classify .pro-items li .img{
		width:170px;
		height: 0;
		padding-bottom: 98%;
		overflow: hidden;
		margin-top:16px;
		position: absolute;
		left:50%;
		margin-left:-85px;
	}
	.Classify .pro-items li .img img{
		width:100%;
	}
	.Classify .pro-items li span{
		width:inherit;
		height: 47px;
		line-height: 47px;
		display: block;
		background: #339999;
		color:#fff;
		text-align: center;
		font-size: 23px;
		position: absolute;
		bottom:0;
	}
</style>